<!-- pages/login/index.vue -->
<script setup>
import Password from './components/Password.vue';
import Mobile from './components/Mobile.vue';
import { ref, computed } from 'vue';

const loginCount = [
	{
		title: '密码登录',
		subTitle: '验证码登录'
	},
	{
		title: '验证码登录',
		subTitle: '密码登录'
	}
];
let loginContIndex = ref(0);
const changeloginContIndex = () => {
	loginContIndex.value = Math.abs(loginContIndex.value - 1);
};

const loginCount1 = computed(() => {
	return loginCount[loginContIndex.value];
});
</script>
<template>
	<view class="user-login">
		<view class="login-type">
			<view class="title">{{ loginCount1.title }}</view>
			<view class="type" @click="changeloginContIndex">
				<text>{{ loginCount1.subTitle }}</text>
				<uni-icons color="#3c3e42" type="forward" />
			</view>
		</view>
	</view>
	<Password v-if="loginContIndex == 0"></Password>
	<Mobile v-if="loginContIndex == 1"></Mobile>
	<!-- 社交账号登录 -->
	<view class="social-login">
		<view class="legend">
			<text class="text">其它方式登录</text>
		</view>
		<view class="social-account">
			<view class="icon">
				<uni-icons color="#00b0fb" size="30" type="qq" />
			</view>
			<view class="icon">
				<uni-icons color="#fb6622" size="30" type="weibo" />
			</view>
			<view class="icon">
				<uni-icons color="#07C160" size="30" type="weixin" />
			</view>
		</view>
	</view>
</template>

<style lang="scss">
@import './index.scss';
</style>
